<script setup>
import { computed, ref, reactive, toValue, customRef, shallowRef, triggerRef, toRefs } from 'vue'

const firstName = ref('')
const lastName = ref('')

const fullName = computed({
    get: () => `${firstName.value} ${lastName.value}`.trim(),
    set: (val) => {
        // 当输入全名时，自动拆分为姓和名
        const names = val.split(' ')
        firstName.value = names[0] || ''
        lastName.value = names[1] || ''
    }
})


fullName.value = 'John Doe' //会当作set的入参


const shallow = shallowRef(1)
const shallowP = ref(1);

const objShallow = shallowRef({
    a: 1,
    b: {
        c: 2
    }
})

const changeObj = () => {
    objShallow.value.b.c = '我变了';
    triggerRef(objShallow)
}


const custom = customRef((track, trigger) => {
    let value = 0
    return {
        get() {
            track()
            return value
        },
        set(newValue) {
            value = newValue
            trigger()
        }
    }
})

console.log(custom)

const arrayReactive = reactive([1, 2, 3])
console.log(arrayReactive)
const allArray = toRefs(arrayReactive);
console.log(allArray)
</script>

<template>
    <div>
        <el-input v-model="firstName" placeholder="姓" />
        <el-input v-model="lastName" placeholder="名" />
        <el-input v-model="fullName" placeholder="全名" />
        <p>全名: {{ fullName }}</p>



        <el-button type="primary" @click="shallow = '21'">{{ shallow }}</el-button>
        <el-button type="primary" @click="changeObj">{{ objShallow.b.c }}</el-button>
    </div>
</template>